<template>
  <view class="container">
    <view class="header">
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #000000">
        我的爱好
        <text>( {{ hobby.length }} / 10)</text>
      </view>
      <button class="addbtn" @click="$refs.addRef.open()">添加</button>
    </view>

    <view :class="{ hobbyitem2: true, choosehobby: item.is_use }" v-for="(item, index) in hobby" :key="index" @click.stop="savemyhobby(item)">
      {{ item.name }}
      <view v-if="item.is_system == 0" class="hobbyson" @click.stop="delhobby(item.id, index)">
        <uni-icons type="closeempty" size="16" color="#fff" style="position: absolute; top: -10rpx; right: 2rpx"></uni-icons>
      </view>
    </view>
    <!-- 保存按钮 -->
    <view class="save" @click="saveid">保存</view>
    <!-- 添加弹框 -->
    <uni-popup ref="addRef" type="center" background-color="#fff">
      <view class="addbox">
        <view class="title">添加爱好</view>
        <input type="text" placeholder="请输入" class="ipt" v-model="hobbykey" />
        <view class="btnbox">
          <button class="cancelbtn" @click="$refs.addRef.close()">取消</button>
          <button class="okbtn" @click="fnsave">保存</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hobby: [], // 添加的数组列表
      hobbykey: '', // 输入框绑定的数据
      hobbyid: [] // 保存时的爱好ID
    };
  },
  onLoad() {
    this.getuserinfo();
  },
  methods: {
    // 获取个人信息
    async getuserinfo() {
      const res = await uni.$http.post('user/index', {
        user_id: JSON.parse(uni.getStorageSync('userinfo')).user_id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      console.log(res.data.data.label_arr);
      this.hobby = res.data.data.label_arr.splice(0, 10);
    },
    //  选择我的爱好
    savemyhobby(item) {
      item.is_use = !item.is_use;
    },
    //保存我的爱好id
    async saveid() {
      this.hobbyid = this.hobby
        .filter((item) => {
          return item.is_use == true;
        })
        .map((item) => {
          return item.id;
        });
      console.log(this.hobbyid.join(','));
      const res = await uni.$http.post('user/profile', {
        label_ids: this.hobbyid.join(','),
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      if (res.data.code == 1) {
        uni.switchTab({
          url: '/pages/my/my'
        });
      }
    },

    // 添加我的爱好
    async fnsave() {
      // 1.追加数据到数组里面
      if (this.hobby.length >= 10) {
        uni.showToast({
          title: '爱好的标签数量不能超过10',
          icon: 'none'
        });
        return;
      }
      await uni.$http.post('user/addLabel', {
        name: this.hobbykey,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      this.hobby.push(this.hobbykey);
      this.hobbykey = '';
      // 2.同时关闭弹框
      this.$refs.addRef.close();
      this.getuserinfo();
    },

    // 删除爱好
    delhobby(id, index) {
      uni.$http.post('user/delLabel', {
        label_id: id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      this.hobby.splice(index, 1);
    }
  }
};
</script>

<style lang="less">
.container {
  box-sizing: border-box;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 30rpx;
    .addbtn {
      width: 104rpx;
      height: 70rpx;
      line-height: 70rpx;
      font-size: 26rpx;
      color: #fff;
      background: #0398ff;
      padding: 0;
      margin: 0;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
  .hobbyitem {
    display: inline-block;
    width: 140rpx;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 28rpx;
    margin-left: 40rpx;
    margin-top: 30rpx;
    background: #f1f1f1;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
  .hobbyitem2 {
    position: relative;
    display: inline-block;
    box-sizing: border-box;

    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 28rpx;
    margin-left: 40rpx;
    margin-top: 30rpx;
    background: #f1f1f1;
    padding: 0 20rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .hobbyson {
      position: absolute;

      width: 40rpx;
      height: 40rpx;
      right: -20rpx;
      top: -10rpx;
      border-radius: 50%;
      background-color: red;
    }
  }
  .addbox {
    width: 690rpx;
    height: 400rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    .title {
      width: 120rpx;
      height: 42rpx;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      margin: 40rpx 285rpx;
      color: #000000;
    }
    .ipt {
      width: 584rpx;
      height: 100rpx;
      background: #f8f8f8;
      margin: 0 53rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
    .btnbox {
      display: flex;
      justify-content: space-around;
      margin-top: 44rpx;
      .cancelbtn {
        width: 300rpx;
        height: 90rpx;
        line-height: 90rpx;
        margin: 0;
        padding: 0;
        border: none !important;
        color: #000000;
        font-size: 28rpx;
        background: #f1f1f1;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
      }

      .okbtn {
        width: 300rpx;
        height: 90rpx;
        line-height: 90rpx;
        margin: 0;
        padding: 0;
        color: #fff;
        font-size: 28rpx;
        background: linear-gradient(11deg, #0091ff 0%, #21e5ff 100%);
        border-radius: 46rpx 46rpx 46rpx 46rpx;
      }
    }
  }
  .save {
    position: absolute;
    bottom: 62rpx;
    left: 40rpx;
    width: 670rpx;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
    background: linear-gradient(180deg, #0398ff 0%, #21e5ff 100%);
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
  .choosehobby {
    background-color: #0398ff;
  }
}
</style>
